<div nz-row class="top-options">
  <div nz-col nzFlex></div>
  <form nz-form class="left-options" nzLayout="inline" [formGroup]="searchForm">
    <nz-form-item>
      <nz-form-control>
        <input
          type="text"
          nz-input
          formControlName="name"
          placeholder="按标题搜索"
        />
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-control>
        <input
          type="text"
          nz-input
          formControlName="type"
          placeholder="按创建人搜索"
        />
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-control>
        <button
          nz-button
          nzType="primary"
          [nzLoading]="hasClicked"
          (click)="loadData()"
        >
          搜索
        </button>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-control>
        <button nz-button nzType="primary" (click)="editData()">新增</button>
      </nz-form-control>
    </nz-form-item>
  </form>
  <div class="right-options">
    <button nz-button nzType="primary">导出</button>
  </div>
</div>

<nz-table
  [nzData]="messageData"
  nzSize="middle"
  [nzFrontPagination]="false"
  [nzLoading]="isLoading"
  [nzTotal]="total"
  [nzPageSize]="pageSize"
  [nzPageIndex]="pageIndex"
  nzTableLayout="fixed"
  (nzPageIndexChange)="loadData($event)"
>
  <thead>
    <tr>
      <th>标题</th>
      <th>内容</th>
      <th>创建人</th>
      <th>创建时间</th>
      <th>图片</th>
      <th>是否已读</th>
      <th>操作</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let item of messageData">
      <td>{{ item.title }}</td>
      <td nzEllipsis>{{ item.content }}</td>
      <td>{{ item.createUser?.name }}</td>
      <td>{{ item.createTime }}</td>
      <td>{{ item.imageUrl }}</td>
      <td>
        <nz-tag nzColor="blue" *ngIf="item.isRead">已读</nz-tag>
        <nz-tag nzColor="red" *ngIf="!item.isRead">未读</nz-tag>
      </td>
      <td>
        <nz-button-group nzSize="small">
          <button nz-button nzType="link" (click)="editData(item)">
            <i nz-icon nzType="edit" nzTheme="outline"></i>
          </button>
          <button nz-button nzType="link" nzDanger>
            <i
              nz-icon
              nzType="delete"
              nzTheme="outline"
              (click)="deleteData(item.id)"
            ></i>
          </button>
        </nz-button-group>
      </td>
    </tr>
  </tbody>
</nz-table>

<app-edit #edit (appSubmited)="onEditSubmit($event)"></app-edit>
